<!DOCTYPE html>
<head>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css">
		body{
			height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #222;
			color: #fff;
		}
		div {
			margin-right: 40px;
			margin-bottom: 40px;
		}

		.flex {
			display: flex;
			align-items: center;
		}

		/* 上半圆 */
		.semi-circle {
			width: 100px;
			height: 50px;
			background-color: #55557f;
			border-radius: 50px 50px 0 0;
			/* 左上、右上、右下、左下 */
		}

		/* 下半圆 */
		.semi-circle2 {
			width: 100px;
			height: 50px;
			background-color: #55557f;
			border-radius: 0 0 50px 50px;
		}

		/* 左半圆 */
		.semi-circle3 {
			width: 50px;
			height: 100px;
			background-color: #55557f;
			border-radius: 50px 0 0 50px;
			/* 左上、右上、右下、左下 */
		}

		/* 右半圆 */
		.semi-circle4 {
			width: 50px;
			height: 100px;
			background-color: #55557f;
			border-radius: 0 50px 50px 0;
		}
	</style>
</head>
<body>
	<section class="flex">
		<div class="semi-circle"></div>
		<div class="semi-circle2"></div>
		<div class="semi-circle3"></div>
		<div class="semi-circle4"></div>
	</section>
	<!-- 代码分析
		1）利用 border-radius 定义各个方向的圆弧半径，把同方向的两个圆角半径设为50px，其余两个圆角半径设为0，出来的效果就是一个半圆了。
		2）圆角半径要等于矩形高度 height 或宽度 width
	-->
</body>
</html>
